<template>
  <div>
    <h3>My Collection</h3>
    <table>
      <thead>
        <tr>
          <th>Collection ID</th>
          <th>Video ID</th>
          <th>Collect Time</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in collectList" :key="item.cid">
          <td>{{ item.cid }}</td>
          <td>{{ item.uid }}</td>
          <td>{{ item.vid }}</td>
          <td>{{ item.collectTime }}</td>
          <td>
            <button @click="deleteCollect(item.cid)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import store from '@/store';
import { getCollectList, delCollect } from '@/api/collect.js';
export default {
  data() {
    return {
      currentUid: '0',
      collectList: []
    }
  },
  created() {
    this.currentUid = this.$store.getters.getUser.name;
    this.getCollection();
  },
  methods: {
    async getCollection() {
      const { data } = await getCollectList({ uid: this.currentUid });
      if (data.code === 1) {
        this.collectList = data.data;
      }
    },
    async deleteCollect(cid) {
      await delCollect(cid);
      this.getCollection();
    }
  }
};
</script>

<style>
</style>